
 <template>
  <div class="text" :style="styleObj">
    <el-switch
      :key="intKey"
      v-model="switchValue"
      :width="this.styleObj.switchSize"
      :active-color="this.styleObj.activeColor"
      :inactive-color="this.styleObj.inactiveColor"
      :active-value="0"
      :inactive-value="1"
      :disabled="!this.styleObj.disabled"
      @change="handleClick"
    >
    </el-switch>
    <YKdialog ref="ykRef"></YKdialog>
  </div>
</template>

<script>
import store from "@/store/index.js";
import YKdialog from "@/components/Topology/YKdialog.vue";
export default {
  name: "widgetSwitch",
  components: {
    YKdialog,
  },
  props: {
    value: Object,
    ispreview: Boolean,
  },
  data() {
    return {
      options: {},
      optionsStyle: {}, // 样式
      optionsData: {}, // 数据
      optionsSetup: {},
      dataId: "",
      timer: null,
      switchValue: 1,
      intKey: 0,
    };
  },
  computed: {
    transStyle() {
      let transData = this.objToOne(this.options);
      return transData;
    },
    styleObj() {
      return {
        position: this.ispreview ? "absolute" : "static",
        activeColor: this.transStyle.activeColor,
        inactiveColor: this.transStyle.inactiveColor,
        switchSize: this.transStyle.switchSize,
        disabled: this.transStyle.openYk,
        width: this.transStyle.width + "px",
        height: this.transStyle.height + "px",
        left: this.transStyle.left + "px",
        top: this.transStyle.top + "px",
      };
    },
    jtData() {
      return store.state.data;
    },
  },
  watch: {
    value: {
      handler(val) {
        this.options = val;
        this.optionsStyle = val.position;
        this.optionsData = val.data;
        this.optionsSetup = val.setup;
        this.setOptionsData();
        this.initKey();
      },
      deep: true,
    },
  },
  created() {},
  mounted() {
    this.options = this.value;
    this.optionsStyle = this.value.position;
    this.optionsData = this.value.data;
    this.optionsSetup = this.value.setup;
    this.setOptionsData();
    this.timer = setInterval(() => {
      this.getDatavalue();
      // clearInterval(this.timer);
      // this.timer = null;
    }, 300);
    this.initKey();
  },
  destroyed() {
    if (this.timer != null) {
      clearInterval(this.timer);
      this.timer = null;
    }
  },
  methods: {
    initKey() {
      this.intKey = Math.trunc(Math.random() * 1000);
    },
    getDatavalue() {
      if (store.state.data.hasOwnProperty(this.dataId)) {
        this.switchValue = store.state.data[this.dataId].value;
      }
    },
    // 数据解析
    setOptionsData() {
      const optionsData = this.optionsData; // 数据类型 静态 or 动态
      if (optionsData.dataType == "dynamicData") {
        this.dataType = "dynamicData";
        if (optionsData.dynamicData.hasOwnProperty("chartProperties")) {
          if (
            optionsData.dynamicData.chartProperties.hasOwnProperty("dataId")
          ) {
            this.dataId = optionsData.dynamicData.chartProperties.dataId;
          }
        }
      } else {
      }
    },
    handleClick(val) {
      console.log(val);
      console.log(this.optionsSetup);
      var jsonObject = JSON.parse(this.optionsSetup.ykInfo);
      this.$refs.ykRef.Ykdialog(jsonObject);
    },
  },
};
</script>

<style scoped lang="scss">
.text {
  width: 100%;
  height: 100%;
  overflow: hidden;
}
</style>
